.navbar-web-app {
    @extend .navbar;
    background-color: var(--webapp-nav-bg);

    border-bottom: 1px solid #{$gray-600};
    border-radius: 0px;
    gap: 12px;

    @include media-breakpoint-down(lg) {
        background-color: #{$gray-900};
    }

    .navbar-collapse {
        @include media-breakpoint-down(lg) {
            position: fixed;
            top: $navbar-height;
            left: 0px;
            width: 100vw;
        }
    }
    
    &.horizontal {
        height: $navbar-height;

        @include media-breakpoint-up(lg) {
            height: $navbar-height;
            --bs-navbar-padding-y: 24px;
            --bs-navbar-padding-x: 1.25rem;
        }
        
        .controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: $navbar-height;

            @include media-breakpoint-down(lg) {
                width: 100%;
            }
        }

        .navbar-collapse {
            @include media-breakpoint-up(lg) {
                width: 100%;
            }
        }
    }

    .deployment_controls {
        min-width: 300px;
    }

    .sub-menu-dropdown {
        background-color: #{$gray-800};
        height: 100vh;
    }

    .top-nav-controls {
        &:not(.collapsed) {
            .mobile-left-nav-controls {
                background-color: #{$neon-tint-100};
            }
        }

        .mobile-left-nav-controls {
            background-color: #{$gray-700};
        }
    }

    .mobile-dashboard-button:not(:active) {
        background-color: #{$gray-700};
    }

    .btn-dropdown {
        padding: 8px 20px;
    }
}
